<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>红绿灯</title>
</head>
<body>
<div id="container">
    <figure>
        <figcaption>红绿灯</figcaption>
        <div class="light-container">
            <div class="light red"></div>
            <div class="light yellow"></div>
            <div class="light green"></div>
        </div>
    </figure>

</div>

</body>
<!--       当然是学习 vue ，把 css 和 js 都写进 html 文档里  -->
<style>
    #container {
        padding: 20px 10px;
        border: whitesmoke solid 1px;
        margin: 50px auto;
    }
    figcaption{
        text-align: center;
        margin: 10px;
    }

    .light-container {
        display: flex;
        padding: 30px;
        justify-content: space-around;
        background: silver;
        border-radius: 30px;
        max-width: 400px;
        margin: auto;
    }

    .light {
        width: 100px;
        height: 100px;
        border-radius: 50px
    }

    /* bg-color  */
    .red {
        background: red;
    }

    .yellow {
        background: gold;
    }

    .green {
        background: lightgreen;
    }


</style>
</html>